<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


    <title>Sliqvers音阁 · 在线音乐</title>

    <link rel="shortcut icon" href="#" />

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
   <!-- <script src="js/bootstrap.min.js"></script>-->
   <style type="text/css">
    :root {
        --main-color: #ff6b6b;    /* 主色-珊瑚红 */
        --accent-color: #ffe66d; /* 辅助色-暖黄 */
        --soft-white: #f9f5eb;    /* 柔和白 */
        --dark-gray: #2d3436;     /* 深灰 */
    }

    body {
        background: linear-gradient(135deg, #fff5ec 0%, #ffe8d6 100%);
        min-height: 100vh;
        font-family: 'Segoe UI', system-ui, -apple-system;
    }

    /* 音乐氛围背景 */
    .music-visual {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.15;
    }
    .music-visual::before {
        content: '';
        position: absolute;
        top: -200px;
        left: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
        animation: float 15s infinite;
    }
    .music-visual::after {
        content: '';
        position: absolute;
        bottom: -150px;
        right: -50px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, var(--main-color) 0%, transparent 70%);
        animation: float 12s infinite reverse;
    }

    /* 标题区 */
    .main-title {
        color: var(--dark-gray);
        font-weight: 700;
        text-align: center;
        margin: 2rem 0;
        position: relative;
    }
    .main-title::after {
        content: '';
        display: block;
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, var(--main-color), var(--accent-color));
        margin: 0.8rem auto;
        border-radius: 2px;
    }

    /* 搜索操作区 */
    .control-panel {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 1.2rem;
        padding: 1.5rem 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 20px rgba(255, 107, 107, 0.1);
        backdrop-filter: blur(8px);
    }
    .search-group {
        display: flex;
        align-items: center;
        gap: 1rem;
        max-width: 500px;
    }
    .search-input {
        border: 2px solid #f0f0f0;
        border-radius: 0.8rem;
        height: 2.8rem;
        padding-left: 2.5rem;
        background: url('https://cdn-icons-png.flaticon.com/512/483/483354.png') no-repeat 0.8rem center;
        background-size: 1.2rem;
        transition: all 0.3s;
    }
    .search-input:focus {
        border-color: var(--main-color);
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
    }
    .action-btns {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .action-btn {
        padding: 0.6rem 1.2rem;
        border-radius: 0.8rem;
        border: none;
        background: white;
        color: var(--dark-gray);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        transition: all 0.3s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
        color: var(--main-color);
    }

    /* 音乐列表 */
    .music-table {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 1.2rem;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(255, 107, 107, 0.08);
    }
    .music-table thead {
        background: var(--main-color);
        color: white;
    }
    .music-table th {
        padding: 1.2rem;
        font-weight: 500;
    }
    .music-table td {
        padding: 1rem 1.2rem;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
    }
    .music-table tr {
        transition: all 0.3s;
    }
    .music-table tr:hover {
        background: rgba(255, 246, 237, 0.8);
    }

    /* 操作按钮 */
    .op-btn {
        padding: 0.4rem 0.8rem;
        border-radius: 0.6rem;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        transition: all 0.3s;
    }
    .play-btn {
        background: var(--accent-color);
        color: #2d3436;
    }
    .play-btn:hover {
        background: #ffd35c;
        transform: scale(1.05);
    }
    .delete-btn {
        background: #ffe3e3;
        color: #ff6b6b;
    }
    .love-btn {
        background: #ffe8f0;
        color: #ff6b9d;
    }

    /* 播放器区域 */
    .music-player {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        background: white;
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: 0 4px 20px rgba(255, 107, 107, 0.15);
        display: flex;
        align-items: center;
        gap: 1rem;
        min-width: 280px;
    }
    .player-cover {
        width: 40px;
        height: 40px;
        border-radius: 0.5rem;
        background: var(--main-color);
        flex-shrink: 0;
    }

    /* 动画 */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }
</style>
    <script type="text/javascript">
        // 核心代码实现
		$(function(){
            load();
        });



        //musicName可以传参  也可以不传参数
        function load(musicName) {

            $.ajax({

                url:"/music/findmusic",
                data:{"musicName": musicName},
                type:"GET",
                dataType:"json",
                success:function(obj) {
                    console.log(obj);
                    var data = obj.data;//数组

                    var s = '';
                    //data[i].id    data[i].singer  data[i].title
                    for(var i = 0; i < data.length;i++) {
                        var musicUrl = data[i].url+".mp3";
                        console.log(musicUrl);

                        s += '<tr>';
                        s += '<th > <input id= "'+data[i].id+'" type="checkbox"> </th>';
                        s += '<td>'+data[i].title+'</td>';
                        s += '<td>'+data[i].singer+'</td>';
                        s += '<td> <button class = "btn btn-primary"  onclick="playerSong(\''+musicUrl+'\')"> 播放歌曲 </button>' +'</td>';
                        s += '<td> <button class = "btn btn-primary"  onclick="deleteInfo('+data[i].id+')"> 删除 </button>' +
                        '<button class = "btn btn-primary"  onclick="loveInfo('+data[i].id+')"> 喜欢 </button>' +'</td>';
                        s += "</tr>"
                    }
                    $("#info").html(s);
                }
            });
        }

        function playerSong(obj) {
            var name = obj.substring(obj.lastIndexOf("=")+1);
            //obj:播放的音乐的地址  name:播放的音乐的名称，0：播放的开始时间  false:不自动播放
            SewisePlayer.toPlay(obj,name,0,true);
        }

        function deleteInfo(obj) {
            console.log(obj);
            $.ajax({
                url:"/music/delete",
                type: "POST",
                data:{"id":obj},
                dataType:"json",

                success: function(val) {
                    console.log(val);

                    if(val.data == true) {
                        //删除成功！
                        alert("删除成功！,重新加载当前页面！");
                        window.location.href = "list.html";
                    }else{
                        alert("删除失败！");
                    }
                }
            });
        }


        $(function(){
            $("#submit1").click( function(){
                var name = $("#exampleInputName2").val();
                load(name);
            });

            $.when(load).done(function(){
                $("#delete").click(function(){
                    var id = new Array();
                    var i = 0;//数组的小标
                    //
                    $("input:checkbox").each(function(){
                        //如果被选中,this代表发生事件的dom元素，<input>
                        if( $(this).is(":checked")) {
                            id[i] = $(this).attr("id");
                            i++;
                        }
                    });

                    console.log(id);

                    $.ajax({
                        url:"/music/deleteSel",
                        data:{"id":id},
                        dataType:"json",
                        type:"post",

                        success:function(obj){
                            if(obj.data == true) {
                                alert("删除成功！");
                                window.location.href = "list.html";
                            }else{
                                alert("删除失败！");
                            }
                        }
                    });
                });
            });
        });


        function loveInfo(obj) {

            $.ajax({
                url:"/lovemusic/likeMusic",
                type:"POST",
                data:{"id":obj},
                dataType:"json",

                success:function(val){
                    if(val.data == true) {
                        alert("收藏成功！");
                        window.location.href = "list.html";
                    }else{
                        alert("您已经收藏了这个音乐！");
                    }
                }
            });
        }


    </script>
</head>

<body id="body">
      <!-- 音乐氛围背景 -->
      <div class="music-visual"></div>

      <div class="container">
          <!-- 标题 -->
          <h2 class="main-title">🎵 Sliqvers音阁 · 在线音乐</h2>
  
          <!-- 搜索与操作区 -->
          <div class="control-panel">
              <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
                  <!-- 搜索表单 -->
                  <div class="search-group flex-grow-1">
                      <input name="name" type="text" class="form-control search-input" id="exampleInputName2" placeholder="搜索你喜欢的音乐...">
                      <button id="submit1" type="button" class="btn action-btn" style="background: var(--main-color); color: white;">
                          <i class="fas fa-search"></i> 立即搜索
                      </button>
                  </div>
  
                  <!-- 操作按钮 -->
                  <div class="action-btns">
                      <a class="action-btn" href="loveMusic.html">
                          <i class="fas fa-heart" style="color: #ff6b9d;"></i> 喜欢列表
                      </a>
                      <a class="action-btn" href="upload.html">
                          <i class="fas fa-upload" style="color: #4cd137;"></i> 添加歌曲
                      </a>
                      <a id="delete" class="action-btn">
                          <i class="fas fa-trash" style="color: #ff6b6b;"></i> 删除选中
                      </a>
                  </div>
              </div>
          </div>
<div class="container">
    <!-- <h3  style="text-align: center">在线音乐服务器</h3> -->
    <div style="float: left;">
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">歌曲名</label>
                <input name="name" type="text" class="form-control" id="exampleInputName2" >
            </div>
            <button id="submit1" type="button" class="btn btn-primary">查询</button>
        </form>
    </div>
    <div style="float: right;margin-bottom: 15px">
        <a class="btn btn-primary" href="loveMusic.html">喜欢列表</a>
        <a class="btn btn-primary" href="upload.html">添加歌曲</a>
        <!-- <a id="delete" class="btn btn-primary">删除选中</a> -->
    </div>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>选择</th>
            <th>歌名</th>
            <th>歌手</th>
            <th>歌曲</th>
            <th>操作</th>
        </tr>

        

        <tbody id="info" valign="middle">
            <tr>
                <th> <input id="1" type="checkbox"> </th>
                <td>成都</td>
                <td>赵雷</td>
                <td><button class="btn btn-primary" onclick="playerSong('+musicUrl+')">播放歌曲</button></td>
                <td><button class="btn btn-primary" onclick="deleteInfo('+musicUrl+')">删除</button>
                     <button class="btn btn-primary" onclick="loveInfo('+musicUrl+')">喜欢</button>  
                </td>
            </tr>
    
            <tr>
                <th> <input id="2" type="checkbox"> </th>
                <td>成都</td>
                <td>赵雷</td>
                <td><button class="btn btn-primary" onclick="playerSong('+musicUrl+')">播放歌曲</button></td>
                <td><button class="btn btn-primary" onclick="deleteInfo('+musicUrl+')">删除</button>
                     <button class="btn btn-primary" onclick="loveInfo('+musicUrl+')">喜欢</button>  
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
<div style="width: 180px; height: 140px; position:absolute; bottom:10px; right:10px">
    <script type="text/javascript" src="player/sewise.player.min.js"></script>
    <script type="text/javascript">
			SewisePlayer.setup({
				server: "vod",
				type: "mp3",
                //这里是默认的一个网址
				videourl:"http://jackzhang1204.github.io/materials/where_did_time_go.mp3",
		        skin: "vodWhite",
                //这里需要设置false
                autostart:"false",
			});
	</script>
</div>
</html>